If the grid does not work. Web Designer Knowledge Base
Printed 2016-10-20
Sometimes it happens that the design doesn't fit into the grid from the first or second time. Well, that is, you are puffing up, bothering, and the information still looks somehow unsuccessfully scattered across the screen. And there is a feeling - it would be better if this shit of the net was not here at all!
This feeling contains a ray of salvation. If you find yourself in this situation, do the following:
1. Draw a layout without adhering to the grid at all. Observe the boundaries of the screen, some basic alignment - but do the rest “by eye”. The main requirement is that it looks good!
2. Look from the side at the layout and try to roughly outline vertical lines in it.
3. Add as many guides as you find vertical lines. If the guides are very close to each other (smaller, say, 20 pixels), leave only one of them, and fit the rest of the blocks under it.
On the one hand, the resulting grid is organically born from the layout itself, and It is not brought into it from without, and therefore it looks good. On the other hand, at a detailed level, the layout adjusts slightly to it and as a result it looks neat and clean. The result is a truly unique and individual site design.
More about meshes in design:
Why do I need a grid
Going abroad columns
Density rule
Grid and mood
Responsive Grid for Bootstrap
Formula for the grid
Method: if the grid fails